 <script type="text/javascript" charset="utf-8" src="__PUBLIC__/admin/js/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="__PUBLIC__/admin/js/ueditor/ueditor.all.min.js"> </script>

 <script type="text/javascript" charset="utf-8" src="__PUBLIC__/admin/js/ueditor/lang/zh-cn/zh-cn.js"></script>
	<script type="text/javascript" charset="utf-8" src="__PUBLIC__/admin/js/uploadify/jquery.uploadify.min.js" ></script>
	<link rel="stylesheet" charset="utf-8" type="text/css" href="__PUBLIC__/admin/js/uploadify/uploadify.css"> 
<style>
	.kuan{ width: 100%; overflow: hidden; float: left; margin: 5px; }
	.bg{ background: none; border: none;}
	label{ font-size: 16px;}
	.img img{ width: 120px; height: 120px;}

</style>

<div class="panel panel-default">
	  <div class="panel-heading">添加</div>
	  <div class="panel-body" style=" padding:0px 20%;">
	    
		<form action="{:U('Apt/listimgadd')}" method="post" id="add" onsubmit="return validation()">		   
		   <div class="kuan">
		    <div class="form-group" >
		    	
		   		 <label for="listimg" >列表轮播图:<span style="color: red;">(*双击图片删除)</span></label> 				
		    	 <input type="file" class="form-control" id="upload" placeholder="列表轮播图"> <br /> 
		    	  <input type="hidden" name="img"  id="img"> 
		    	<div id="view" class="img">
		    		<volist name="list" id="data"  key="$key" >
		    		{$data.img}
		    		</volist>   
		    	</div>
		  </div>
		   </div>			 
			
				<div class="col-sm-4" style="padding:30px 0px;">
		  <button type="submit" class="btn btn-primary">保存</button>
		  </div>
		</form>
		 </div>  
	  </div>
	
	

<script type="text/javascript">

	//图片删除
	function delimg(a){
	var	data={data:a.id};
	url="{:U('Apt/delimg')}";
	$.post(url, data,function(c){		
		if(c.s){
		alert("删除成功");
		var el = document.getElementById(''+c.id+''); 
			el.parentNode.removeChild(el); 
		}else{
		alert("删除失败");
		var el = document.getElementById(''+c.id+''); 
			el.parentNode.removeChild(el); 
		}
	});
	}
	//图片上传
$(function(){
	$("#upload").uploadify({
        'height'        : 30,
        'width'         : 90, 
		'buttonClass'   :'bg', 
		'queueSizeLimit': 6,		
        'buttonText'    :'<button type="button" class="btn btn-primary "><span class="glyphicon glyphicon-plus">选择图片</span></button>',
        'swf'           : '__PUBLIC__/admin/js/uploadify/uploadify.swf',
        'uploader'      : "{:U('Apt/upload')}",
        'auto'          : true,
        'multi'         : true,      
        'fileTypeExts'  : '*.jpg;*.jpge;*.gif;*.png',
        'fileSizeLimit' : '2MB', 
        'onUploadSuccess':function(file,data,response){
             var obj = eval('('+data+')');         
			 if(obj.s){
	$('#view').append('<a href="javascript:void(0);"  ondblclick="delimg(this)" id="'+obj.d+'.'+obj.c+'"><div style="float: left;width:120px;"class="'+obj.d+'"><img  src="__PUBLIC__/upload/image/'+obj.d+'.'+obj.c+'"/><span style=" width: 120px;  height:40px; line-height: 20px; ">'+obj.d+'.'+obj.c+'</span></div></a>');
				$('#view').fadeIn();				
			 }		
        }
    });
}); 

//验证	
	function validation(){
		var img=$('#view').html().trim();//获取值			
		var	listimg=$('#img').val(img);//写入值
		
		var listnum=document.getElementById("view").getElementsByTagName("img");//验证数量
		
	
		if(img=="")
		{
			alert('请上传列表轮播图');
			 return false; 
		}
		if(listnum.length>6)
		{
			alert('列表轮播图不能超过六张');
			 return false; 
		}
		
		
		 return true; 
	
	}


</script>